<template>
	<view class="leisurely-box solid-bottom padding-top"
		v-if="order.productId"
	>

		<view class="leisurely  text-grey">
			<!-- 二手剧本 -->
			<view class="scen-group solid-bottom">
				<view class="scen2  text-gray">
					<view class="scen-img">
						<image :src="order.productIcon" 
							mode="aspectFill"></image>
					</view>
					<view class="scen-info">
						<view class="scen-info-title">
							<text class="title">{{order.scenName}}</text>
							<text  class='cu-tag bg-cyan round sm'>{{order.scenNum}}人本</text>
						</view>
						<view class="publisher">发行商: {{order.scriptPublisher}}</view>
						<view class="text-price">{{order.productDiscountPrice}}</view>
					</view>
					<view class="num"><text class="text-xs">x</text>1</view>
				</view>
			</view>
			
			<view class="total">
				共1件商品，合计:{{orderAmount}}
				<text v-if="order.productTransportCosts">（含运费{{order.productTransportCosts}}）</text>
				<text v-else>（包邮）</text>
			</view>
			
			<view class="btn-group">
				<button class="line-cyan cu-btn round margin-xs"
					@click="soldOut"
				>下架</button>
				
				<button class="line-cyan cu-btn round margin-xs"
					@click="refreshTime"
				>刷新</button>
				
				<!-- <button class="bg-cyan cu-btn round margin-xs"
				>修改</button> -->
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Viewleisurely',
		props: {
			order: {
				type: Object,
				default: () => {
					return {}
				}
			},
			mystatus: {
				type: Number,
				default: 0
			},
		},
		computed:{
			orderAmount() {
				let productDiscountPrice = this.order.productDiscountPrice -0
				let productTransportCosts = this.order.productTransportCosts -0
				return productDiscountPrice + productTransportCosts
			}
		},
		methods:{
			jumpLeisurely() {
				this.$jumpPages('orderIdleDetail', {
					orderId: this.order.orderId,
					identity: this.mystatus>=2?'B': 'S'
				})
			},
			
			soldOut() {
				this.$emit('soldOut', this.order.productId);
			},
			
			refreshTime() {
				this.$emit('refreshTime', this.order.productId);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.leisurely-box{
		background-color: #FFFFFF;
		position: relative;

		.leisurely{
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.shop-warp{
				display: flex;
				align-items: center;
				padding: 30rpx;
				.avatar-warp{
					width: 60rpx;
					height: 60rpx;
					margin-right: 22rpx;
					border-radius: 50%;
					background: #F5F5F5;
				}
				.avatar{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				.nickname{
					font-size: 30rpx;
					color: #000000;
					margin-right: 22rpx;
				}
			}
			.scen-group{
				background-color: #F8FAFF;
				padding: 30rpx;
			}
			.scen2{
				display: flex;
				position: relative;
				padding-bottom: 20rpx;
				
				.scen-img{
					width: 120rpx;
					height: 165rpx;
					-webkit-flex-shrink: 0;
					flex-shrink: 0;
					position: relative;
					background: #F5F5F5;
					border-radius: 10rpx;
					image{
						border-radius: 10rpx;
						width: 120rpx;
						height: 165rpx;
					}
				}
				.scen-info{
					display: flex;
					flex-direction: column;
					flex: 1;
					overflow: hidden;
					position: relative;
					padding-left: 15px;
					font-size: 14px;
				}
				.scen-info-title{
					line-height: 20px;
					margin-bottom: 24rpx;
					.title{
						font-size: 36rpx;
						color: #000;
						font-weight: 700;
						margin-right: 27rpx;
					}
				}
				.publisher{
					margin-bottom: 30rpx;
					font-size: 24rpx;
				}
				.text-price{
					color: #E42C2C;
					font-size: 32rpx;
					font-weight: 700;
				}
			}
			
			.total{
				font-size: 24rpx;
				color: #909090;
				padding: 20rpx 30rpx;
				text-align: left;
			}
			.btn-group{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex-wrap: wrap;
				padding: 10rpx;
			}
		}
		
	}
</style>
